Skip to content

feat: Add Playful Custom 404 Page Not Found Component#632

Merged
mehul-m-prajapati merged 2 commits into
GitMetricsLab:mainfrom
manishworkss:feat/custom-404-page
May 31, 2026
Merged

feat: Add Playful Custom 404 Page Not Found Component#632
mehul-m-prajapati merged 2 commits into
GitMetricsLab:mainfrom
manishworkss:feat/custom-404-page

Conversation

@manishworkss
Copy link
Copy Markdown
Contributor

@manishworkss manishworkss commented May 31, 2026 •
edited by coderabbitai Bot
Loading

  • Created a new NotFound component in src/pages/NotFound/NotFound.tsx
  • Used framer-motion to add animated ghost illustration and pulsating shadow
  • Designed the page using Tailwind CSS for a playful and modern aesthetic
  • Imported and configured the NotFound component as a wildcard catch-all route (*) in Router.tsx to handle all invalid URLs

Related Issue

Description

Previously, if a user navigated to an invalid or broken URL, the application lacked a fallback route, resulting in a poor user experience. This PR introduces a dedicated, fully responsive 404 component to gracefully handle these edge cases. To make it more engaging for users, I utilized framer-motion for a subtle ghost animation and designed the layout with Tailwind CSS to match the project's overall aesthetic, complete with dark mode support. A "Teleport Back Home" button was also added to seamlessly route users back to the dashboard.

How Has This Been Tested?

  • Spun up the local dev server using npm run dev.
  • Navigated manually to multiple invalid URLs (e.g., http://127.0.0.1:5173/ghost-town).
  • Verified that the animated 404 component renders flawlessly on both desktop and mobile viewports.
  • Clicked the "Teleport Back Home" button and confirmed that react-router-dom correctly redirects back to the root / path.

Screenshots (if applicable)

Screenshot 2026-05-31 at 12 37 38 PM

Type of Change

  • Bug fix
  • New feature
  • Code style update
  • Breaking change
  • Documentation update

Summary by CodeRabbit

  • New Features
    • Added a 404 error page that displays when users navigate to non-existent URLs, featuring animated visual elements and a quick navigation option to return to the home page.

@manishworkss
feat: add playful custom 404 Page Not Found component
027290b 
- Created a new NotFound component in src/pages/NotFound/NotFound.tsx
- Used framer-motion to add animated ghost illustration and pulsating shadow
- Designed the page using Tailwind CSS for a playful and modern aesthetic
- Imported and configured the NotFound component as a wildcard catch-all route (*) in Router.tsx to handle all invalid URLs
@netlify
Copy link
Copy Markdown

netlify Bot commented May 31, 2026 •
edited
Loading

❌ Deploy Preview for github-spy failed.

Name Link
🔨 Latest commit ced38dd
🔍 Latest deploy log https://app.netlify.com/projects/github-spy/deploys/6a1c111f6af9670008f8ad98

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 31, 2026 •
edited
Loading

Review Change Stack

Warning

Review limit reached

@mehul-m-prajapati, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 28 minutes and 18 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7b4d4d87-87a5-4c6a-b0d2-00f07c021a88

📥 Commits

Reviewing files that changed from the base of the PR and between 027290b and ced38dd.

📒 Files selected for processing (1)
  • src/Routes/Router.tsx
📝 Walkthrough

Walkthrough

This PR implements a custom 404 page for the application. A new NotFound component is created with animated visuals (framer-motion ghost icon with floating effects) and dark-mode-aware styling. The Router is updated to import this component and register a catch-all route (path="*") that renders the NotFound page for any unmatched URL.

Changes

404 Page with Router Integration

Layer / File(s) Summary
NotFound page component and router integration
src/pages/NotFound/NotFound.tsx, src/Routes/Router.tsx		 New NotFound component renders a 404 page with animated ghost illustration, gradient text, and a styled home link; Router imports the component and registers a path="*" catch-all route to display it when no other route matches.

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly Related PRs

Suggested Labels

quality:clean, level:beginner

Poem

🐰 A ghost floats free through missing pages,
With shimmer-steps through the ether stages,
"Teleport back home!" the phantom calls,
No broken links, no shattered halls,
Four-oh-four finds its graceful sprawl! ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely summarizes the main change: adding a custom 404 NotFound component with playful features.
Description check ✅ Passed The description comprehensively covers all required sections including related issue, detailed description, testing verification, screenshots, and type of change selection.
Linked Issues check ✅ Passed All requirements from issue #630 are met: NotFound component created with Tailwind CSS, dark mode support, Back Home button with react-router-dom, and wildcard route added to Router.tsx.
Out of Scope Changes check ✅ Passed All changes are directly aligned with issue #630 objectives; no out-of-scope modifications detected beyond the scope of implementing the 404 page feature.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

github-actions[bot]
github-actions Bot reviewed May 31, 2026
View reviewed changes
Copy link
Copy Markdown

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Thank you @manishworkss for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines

@mehul-m-prajapati mehul-m-prajapati merged commit 45cb51d into GitMetricsLab:main May 31, 2026
1 of 2 checks passed
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 31, 2026

🎉🎉 Thank you for your contribution! Your PR #632 has been merged! 🎉🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@github-actions github-actions[bot] github-actions[bot] left review comments

Assignees

No one assigned

Labels

gssoc:approved level:intermediate quality:clean type:accessibility

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Enhancement]: Add a Custom 404 "Page Not Found" Route & Component

2 participants

@manishworkss @mehul-m-prajapati